{{- /*
Renders a menu for the given menu ID with dropdown support and keyboard navigation.

@context {page} page The current page.
@context {string} menuID The menu ID.

@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
*/}}

{{- $page := .page }}
{{- $menuID := .menuID }}

{{- with index site.Menus $menuID }}
  <ul class="site-main-nav flex flex-col md:flex-row md:justify-center md:gap-5 py-2 md:py-0 w-full" role="menubar">
    {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
  </ul>
{{- end }}

{{- define "partials/inline/menu/walk.html" }}
  {{- $page := .page }}
  {{- range .menuEntries }}
    {{- $attrs := dict "href" .URL "class" "nav-item" }}
    {{- if $page.IsMenuCurrent .Menu . }}
      {{- $attrs = merge $attrs (dict "class" "nav-item active" "aria-current" "page") }}
    {{- else if $page.HasMenuCurrent .Menu .}}
      {{- $attrs = merge $attrs (dict "class" "nav-item ancestor" "aria-current" "true") }}
    {{- end }}
    {{- $name := .Name }}
    {{- with .Identifier }}
      {{- with T . }}
        {{- $name = . }}
      {{- end }}
    {{- end }}
    <li class="relative {{ if .HasChildren }}group{{ end }}" role="none">
      {{- if .HasChildren }}
        <div class="dropdown-container">
          <button
            class="nav-item flex items-center justify-between w-full md:w-auto space-x-1"
            aria-expanded="false"
            aria-controls="dropdown-{{ .Identifier }}"
            role="menuitem">
            <span>{{ $name }}</span>
            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
          </button>
          <ul id="dropdown-{{ .Identifier }}"
              class="hidden static md:absolute left-0 w-full md:w-auto py-1 bg-white md:rounded-md md:shadow-lg md:border md:border-gray-200 z-60 mt-1"
              role="menu">
            {{- range .Children }}
            <li class="relative" role="none">
              <a href="{{ .URL }}"
                 class="nav-dropdown-item"
                 role="menuitem"
                 {{- if $page.IsMenuCurrent .Menu . }}
                 aria-current="page"
                 {{- end }}>
                {{ .Name }}
              </a>
            </li>
            {{- end }}
          </ul>
        </div>
      {{- else }}
        <a role="menuitem"
           {{- range $k, $v := $attrs }}
             {{- with $v }}
               {{- printf " %s=%q" $k $v | safeHTMLAttr }}
             {{- end }}
           {{- end -}}>
          {{ $name }}
        </a>
      {{- end }}
    </li>
    {{- end }}
    <li class="block md:hidden pt-2.5"><a class="btn btn-yellow btn-sm" href="{{ relLangURL "/donate/" }}">{{ i18n "header_donate_now" }}</a></li>
{{- end }}
